<template>
  <div class="I-IV-I">
    <div class="I-IV-I__title">
      Ⅳ社会服务与学科简介
    </div>
    <table class="I-IV-I__table">
      <tr class="I-IV-I__table-trone">
        <td class="I-IV-I__table-trone-td"
            colspan="2">
          <div class="I-IV-I__table-trone-td-title">
            IV-1社会服务贡献
          </div>
          <div class="I-IV-I__table-trone-td-desc">
            提供在社会服务方面的主要贡献和5个典型案例（每个案例限500字）。案例包括但不限于：瞄准世界科技前沿，解决关键核心技术问题；参与国家重大工程，实施科技成果转化，服务经济社会发展与国防军队建设；服务新冠肺炎疫情防控和脱贫攻坚等国家重大需求；参与政策法规、行业标准与规划制定，服务行业发展；举办重要会议论坛，创办学术期刊或学术组织，制定学科与学术发展规划，服务学术共同体；开展科学普及、行业人才培训、全民终身学习等社会公共与公益服务。案例强调突破性贡献，内容应具体翔实，发生在评估期内。
          </div>
        </td>
      </tr>
      <tr class="I-IV-I__table-trtwo">
        <td class="I-IV-I__table-trtwo-td"
            colspan="2">
          <div class="I-IV-I__table-trtwo-td-title">
            社会服务贡献总体情况
            <span class="I-IV-I__table-trtwo-td-title-tips">
              （限800字）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-IV-I__table-trthree">
        <td class="I-IV-I__table-trthree-td"
            colspan="2">
          <el-input v-model="daa.situation"
                    :autosize="{minRows:17}"
                    placeholder="请输入社会服务贡献总体情况"
                    maxlength="800"
                    showWordLimit
                    type="textarea"
                    class="I-IV-I__table-trthree-td-textarea"/>
        </td>
      </tr>
      <template v-for="(item, index) in 5">
        <tr :key="index + '1'"
            class="I-IV-I__table-trfour">
          <td class="I-IV-I__table-trfour-tdone">
            案例{{ count[index] }}
          </td>
          <td class="I-IV-I__table-trfour-tdtwo"/>
        </tr>
        <tr :key="index"
            class="I-IV-I__table-trfive">
          <td class="I-IV-I__table-trfive-td"
              colspan="2">
            <el-input v-model="daa['case0' + (index + 1)]"
                      :autosize="{minRows:17}"
                      placeholder="输入案例内容"
                      maxlength="500"
                      showWordLimit
                      type="textarea"
                      class="I-IV-I__table-trfive-td-textarea"/>
          </td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    daa: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.daa = await getPageData('daa')
    loading.close()
  },
  data () {
    return {
      daa: {
        situation: ''
      },
      count: ['一', '二', '三', '四', '五']
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/4-1-1.less';
</style>
